* {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: "Gotham", Helvetica, Arial, PingFangSC-Regular, "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}

a {
    text-decoration: none;
}

.war {
    display: flex;

    .left {
        width: 30%;
        height: 100vh;
        border-right: 1px solid #ccc;
        position: sticky;
        top: 0;
        overflow: hidden;

        nav {
            height: 48px;
            display: flex;
            justify-content: space-between;
            padding: 24px;
            position: relative;

            .nav_left {
                display: flex;

                .logo {
                    margin-right: 12px;

                    img {
                        width: 36px;
                    }
                }

                ul {
                    display: flex;
                    padding-left: 0;
                    font-size: 16px;
                    font-weight: bold;
                    transition: all .1s;

                    a {
                        color: black;
                    }

                    li {
                        padding: 5px 10px;
                    }
                }
            }

            .nav_right {
                cursor: pointer;
                transition: all .5s;

                img {
                    width: 24px;
                    padding: 6px 0px;
                }

                // div {
                //     width: 36px;
                //     height: 36px;
                //     background: url(../../images/icon-close.svg)no-repeat center center;
                //     display: none;
                // }
            }
        }

        .title,
        .block-nav {
            position: relative;
            top: 50%;
            transform: translateY(-50%);
            font-size: 26px;
            font-weight: 700;

            padding: 0 24px 0 84px;

            >div {
                margin-bottom: 12px;
            }
        }

        .block-nav {

            // width: 100%;
            ul {
                // padding: 0 24px 0 84px;
                margin-top: -50px;

                li {
                    font-weight: 700;
                    line-height: 120%;
                    font-size: 18px;
                }

                a {
                    color: inherit;
                    display: block;
                    padding: 8px 0;
                    -webkit-user-select: none;
                    -moz-user-select: none;
                    -ms-user-select: none;
                    user-select: none;
                }

                hr {
                    // width: 300px;
                    background: rgba(0, 0, 0, 0.12);
                    border: 0;
                    height: 1px;
                    margin-bottom: 0;
                    margin-top: 0;
                    margin: 12px 0;
                }
            }

            .account {
                display: flex;
                align-items: center;

                .login-btn {
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    padding: 3px 0;
                    margin-right: 24px;

                    img {
                        width: 28px;
                        margin-right: 4px;
                        display: block;
                    }

                    span {
                        color: #00A862;
                        font-size: 16px;
                        font-weight: 400;
                    }
                }

                .register-btn {
                    cursor: pointer;
                    font-size: 16px;
                    font-weight: 400;
                    border: 1px solid #00A862;
                    border-radius: 48px;
                    box-sizing: border-box;
                    color: #00A862;
                    font-weight: 500;
                    outline: none;
                    padding: 2px 12px;
                    transition-duration: 0.1s;
                    transition-property: background, border-color, color;
                }
            }


        }

        .footer {
            position: absolute;
            bottom: 30px;
            padding: 0 24px 0 84px;

            a {
                color: #ccc;
                font-size: 14px;
                color: rgba(0, 0, 0, 0.38);
                font-weight: 400;
            }
        }
    }

    .right {
        width: 70%;

        .hero {
            background: url(../../images/hero.jpg);
            background-position: 50% 50%;
            background-size: cover;
            width: 100%;
            position: relative;

            &::before {
                background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.7) 81%);
                content: '';
                height: 100%;
                position: absolute;
                width: 100%;
            }

            .cont {
                padding: 48px 24px;
                margin: 0 auto;

                .img {
                    width: 72px;
                    margin-bottom: 24px;
                    position: relative;
                    left: 50%;
                    transform: translateX(-50%);

                    img {
                        width: 100%;
                        display: block;
                    }
                }

                h1 {
                    position: relative;
                    font-weight: 700;
                    color: #C48D69;
                    text-align: center;
                    margin-bottom: 18px;
                    line-height: 140%;
                }
            }

        }

        .seelist {
            text-align: center;
            padding: 48px 0;
            background: url(../../images/map.jpg)no-repeat 50% 50%/cover;

            .wapper {
                box-sizing: border-box;
                margin-left: auto;
                margin-right: auto;
                max-width: 768px;
                width: 100%;

                p {
                    // width: 576px;
                    padding: 0 11%;
                    margin: 16px auto;
                    // margin-bottom: 24px;
                    line-height: 160%;
                    letter-spacing: 0.4px;
                    margin: 0 auto 24px;
                }

                .btn {
                    padding: 14px 24px;
                    border: 1px solid #C48D69;
                    font-weight: 700;
                    background: #C48D69;
                    border-color: #C48D69;
                    color: #FFF;
                    border-radius: 48px;
                    box-sizing: border-box;
                    display: inline-block;
                    outline: none;
                    overflow: hidden;
                    position: relative;
                    transition-duration: 0.1s;
                    transition-property: background, border-color, color;
                }
            }
        }

        .coffoo {

            width: 100%;
            background-color: #231F20;

            .cont {
                text-align: center;
                box-sizing: border-box;
                margin-left: auto;
                margin-right: auto;
                max-width: 768px;
                padding-top: 48px;

                .top {
                    color: #C48D69;

                    .title {
                        font-weight: 700;
                    }

                    h2 {
                        margin-bottom: 48px;
                        font-weight: 400;
                    }
                }

                .bottom {
                    ul {
                        width: 100%;
                        display: flex;
                        justify-content: center;

                        li {
                            width: 144px;
                            margin: 18px;
                            margin-bottom: 6px;
                            color: #fff;

                            .img1 {
                                background: url(../../images/china-yunnan-puer-baoshan.png)no-repeat 50% 50%/cover;
                            }

                            .img2 {
                                background: url(../../images/china-qingkai-farm.png)no-repeat 50% 50%/cover;
                            }

                            .img3 {
                                background: url(../../images/ethiopia-bitta-farm.png)no-repeat 50% 50%/cover;
                            }

                            div {
                                width: 144px;
                                padding-top: 144px;
                                border-radius: 50%;
                                margin-bottom: 12px;

                                img {
                                    width: 100%;
                                }
                            }

                            strong {
                                line-height: 160%;
                                font-weight: 700;
                            }
                        }
                    }
                }
            }

            .img {
                width: 100%;

                img {
                    width: 100%;
                    margin-bottom: -4px;
                }
            }
        }

        .selected-coffoo {
            box-sizing: border-box;
            margin-left: auto;
            margin-right: auto;
            width: 720px;
            max-width: 768px;

            h2 {
                text-align: center;
                margin-bottom: 18px;
            }

            .grid {
                .top {
                    display: flex;

                    img {
                        width: 50%;
                        padding: 12px;
                        // transform: translateX();
                    }

                    >p {
                        width: 50%;
                        padding: 12px;
                        line-height: 160%;
                    }

                    .text {
                        line-height: 160%;
                        padding: 12px;

                        h4 {
                            margin-bottom: 18px;
                        }
                    }
                }


                .bottom {
                    display: flex;

                    img {
                        width: 50%;
                        padding: 12px;
                    }

                    .text {
                        line-height: 160%;
                        padding: 12px;

                        h4 {
                            margin-bottom: 18px;
                        }
                    }
                }

                .text-2 {

                    padding: 48px 24px 0;
                    margin-bottom: 48px;

                    h4 {
                        margin-bottom: 18px;
                    }

                    p {
                        margin-bottom: 24px;
                        line-height: 160%;
                    }
                }
            }
        }

        .footer {
            width: 100%;
            position: relative;

            img {
                width: 100%;
            }

            .logo {
                position: absolute;
                bottom: 15%;
                left: 5%;
                max-width: 288px;
                margin: 0 12px;
                width: 40%;
            }
        }
    }
}